<template>
  <div class='scenerysection'>
    <div class="top"  @click="fun1">
      <router-link to='/sceneryOrder'>预定<div></div></router-link>
      <router-link to='/sceneryMeet'>遇见<div></div></router-link>
      <router-link to='/sceneryStrategy'>策略<div></div></router-link>
      <router-link to='/sceneryYouji'>游记<div></div></router-link>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
export default {
  name: 'ScenerySection',
  methods: {
    fun1 () {
      console.log(1)
    }
  }
}
</script>
<style scoped lang='less'>
.scenerysection{
  .top{
    display: flex;
    justify-content: space-around;
    width: 100%;
    border-bottom:1px solid #dddddd;
    a{
      padding:15px 0 5px;
      width: 25%;
      display: block;
      color:#333;
      text-align: center;
      font-size:18px;
    }
    .router-link-active{
      font-weight:bold;
      &>div{
        margin: 2px auto 0;
        width: 20px;
        height: 4px;
        border-radius:5px;
        background-color: #ffd826;
      }
    }
  }

}
</style>
